<template>
  <div class="container">
    <iframe
      ref="htmlFrame"
      :src="htmlUrl"
      width="575%"
      height="100%"
      frameborder="0"
      class="border-glow glass-effect"
    ></iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 外部 HTML 文件的 URL
      htmlUrl: '/数据流(1).html' // 可以是相对路径或绝对 URL
    };
  },
  mounted() {
    // 可以监听 iframe 加载完成事件
    this.$refs.htmlFrame.addEventListener('load', () => {
      console.log('HTML 文件加载完成');
    });
  }
};
</script>
<!-- <script>
import router from '@/router'
import OverviewMiddle from './components/OverviewMiddle'
import TopItems from './components/TopItems'
import rightRow from './components/rightRow'
import leftRow from './components/leftRow'
export default {
  components: {
    OverviewMiddle, TopItems, rightRow, leftRow
  },
  data() {
    return {
      config: {
        index: true,
        oddRowBGC: '#2A82E4',
        evenRowBGC: '#52AEE4',
        data: [
          ['行1列1', '行1列2', '行1列3'],
          ['行2列1', '行2列2', '行2列3'],
          ['行3列1', '行3列2', '行3列3']
        ]
      }
    }
  },
  methods: {
    toHome() {
      console.log('尝试退出全屏')
      if (document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement) {
        if (document.exitFullscreen) {
          document.exitFullscreen().then(() => {
            // console.log('成功退出全屏')
          }).catch(err => {
            console.error('退出全屏时出错:', err)
          })
        } else if (document.mozCancelFullScreen) { /* Firefox */
          document.mozCancelFullScreen()
          // console.log('使用mozCancelFullScreen退出全屏')
        } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
          document.webkitExitFullscreen()
          // console.log('使用webkitExitFullscreen退出全屏')
        } else if (document.msExitFullscreen) { /* IE/Edge */
          document.msExitFullscreen()
          // console.log('使用msExitFullscreen退出全屏')
        }
      } else {
        // console.log('未处于全屏状态')
      }
      router.push('/')
    }
  }

}
</script>

<template>
  <dv-full-screen-container class="analysis_container">
    <video class="background-video" autoplay muted loop>
      <source src="../../assets/video/bg19.mp4" type="video/mp4">
    </video>
    <dv-border-box-1 :color="['2A82E4', '74b9ff']">
      <div class="top_container">
        <div>
          <el-button round size="small" icon="el-icon-switch-button" @click="toHome">退出</el-button>
        </div>
        <dv-decoration-5 :dur="4" style="width:300px;height:30px" :color="['#2A82E4', '#74b9ff']" />
      </div>
      <!-- 顶部部分 -->
      <!-- <div class="first_container">
        <TopItems />
      </div> -->
      <!-- 中间部分 -->
      <div class="first_container" style="margin-top: 30px;">
        <el-row>
          <!-- 中间左侧栏 -->
          <!-- <el-col :span="6">
            <dv-border-box-12 style="height: 383px;width: 100%;">
              <el-row style="display: flex;justify-content: space-between;align-items: center;padding: 10px;">
                <span style="color: aliceblue;font-weight: bold;">主机概览</span>
                <dv-decoration-1 style="width:200px;height:50px;" :color="['#2A82E4', '#2e59a7']" />
              </el-row>
              <leftRow />
            </dv-border-box-12>
          </el-col> -->
          <!-- 中间地图 -->
          <el-col :span="20">
            <OverviewMiddle />
          </el-col>
          <!-- 中间右侧栏 -->
          <!-- <el-col :span="6">
            <dv-border-box-12 style="height: 383px;width: 100%;">
              <el-row style="display: flex;justify-content: space-between;align-items: center;padding: 10px;">
                <span style="color: aliceblue;font-weight: bold;">总览</span>
                <dv-decoration-3 style="width:250px;height:30px" :color="['#2A82E4', '#2e59a7']" />
              </el-row>
              <rightRow />
            </dv-border-box-12>
          </el-col> -->
        </el-row>
      </div>
      <!-- 底部部分 -->
      <div class="first_container">
        <dv-decoration-10 style="width:100%;height:5px;" />
      </div>
    </dv-border-box-1>
  </dv-full-screen-container>
</template>

<style lang="scss" scoped>
.analysis_container {
  background-color: #282C34;
  .background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensure the video covers the container */
    z-index: -1; /* Send the video behind the content */
    opacity: 0.5;
  }

  .top_container {
    padding: 20px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .first_container{
    width: 96%;
    margin: 0 auto;
  }
}
</style> -->
